<template>
  <div class="box">
    <div class="nav-box">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <span class="breadcrumb-link">{{$store.state.BreadcrumbTitle}}</span>
        </a-breadcrumb-item>
        <span slot="separator">
            <a-icon style="color: #acacac;font-size: 12px" type="right" />
          </span>
        <a-breadcrumb-item>购物车</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="cart-list-box">
      <a-spin tip="亲，请稍等..." style="width: 100%;height: 300px;padding-top: 150px;" v-if="isLoading">
      </a-spin>
      <div class="carts-list" v-if="cartsList.length > 0">
        <a-affix>
          <div class="table-title">
            <ul>
              <li>
                <input v-model="checkTotal"
                       type="checkbox"
                       name="checkall"
                       id="checkall"
                       style="margin-right: 8px;cursor: pointer;"
                       @click="handleClickCheckAll">
                <span style="color: #999999;cursor: pointer;">全选</span>
              </li>
              <li>商品信息</li>
              <li>单价</li>
              <li>数量</li>
              <li>金额（元）</li>
              <li>操作{{checkShopName}}</li>
            </ul>
          </div>
        </a-affix>
        <div class="carts-products">
          <div class="product-list" v-for="item in cartsList" :key="item.mch_id">
            <div class="shop-name">
              <input v-model="item.checkShopName"
                     type="checkbox"
                     name="item.mch_name"
                     id="item.mch_id"
                     style="margin-right: 8px;cursor: pointer;"
                     @click="handleClickShopName(item)">
              <span>{{item.mch_name}}</span>
              <span class="coupon" v-if="item.coupon_list.length  > 0">
                <a-popover placement="bottomLeft" style="position: absolute;" id="a-popover-list">
                  <template slot="content">
                    <ul v-for="coupon in item.coupon_list" :key="coupon.id" style="width: 350px;
                               height: 40px;
                               overflow: hidden;"
                    >
                      <li style="display: inline-block;
                                 width: 80px;
                                 height: 100%;
                                 background-color: #e4e4e4;
                                 overflow: hidden;
                                 line-height: 40px;
                                 text-align: center"
                      >
                        ￥{{ coupon.money }}
                      </li>
                      <li style="display: inline-block;
                                 width: 210px;
                                 height: 100%;
                                 text-align: left;
                                 overflow: hidden;
                                 padding-left: 10px;"
                      >
                        <p>{{coupon.limit}}</p>
                        <p style="color: #9c9c9c">{{coupon.end_time}}</p>
                      </li>
                      <li style="display: inline-block;
                                 width: 60px;
                                 height: 100%;
                                 color: red;
                                 text-align: center;
                                 line-height: 40px;
                                 overflow: hidden"
                      v-if="parseInt(coupon.num) > 0">
                        {{coupon.point}}
                      </li>
                      <li v-else style="display: inline-block;
                                 width: 60px;
                                 height: 100%;
                                 text-align: center;
                                 line-height: 40px;
                                 overflow: hidden"
                      >
                        已抢光
                      </li>
                    </ul>
                  </template>
                  <a-button style="border: 1px solid transparent;position: absolute;height: 100%;width: 100%;">
                    <span class="coupon-str">优惠券<a-icon type="down" /></span>
                    <img src="https://v3pro.houjiemeishi.com/PC/static/images/lq_bg.png" alt="">
                  </a-button>
                </a-popover>
              </span>
            </div>
            <div class="shop-product" v-for="items in item.list" :key="items.id">
              <ul class="shop-product-list">
                <li>
                  <input v-model="items.checkproduct"
                         type="checkbox"
                         name="checkall"
                         id="checkproduct"
                         style="margin-right: 8px;cursor: pointer;"
                         @click="handleSelectItem(items)">
                  <img :src="items.imgurl" alt="">
                </li>
                <li>
                  <p>{{items.pro_name}}</p>
                  <a-modal v-model="visible" cancelText="取消" okText="确定" title="修改商品属性" @ok="handleOk">
                    <div class="updateAttr-img">
                      <div>
                        <img :src="updateAtrrImgUrl" alt="">
                      </div>
                      <div>
                        <p>{{updateTitle}}</p>
                        <p>￥{{updatePrice}}</p>
                      </div>
                    </div>
                    <div class="attrlist-box">
                      <div class="attr-list" v-for="attrItem in updateAttrList" :key="attrItem.id">
                        <div class="attr-name">
                          <span>{{attrItem.attrName}}</span>
                        </div>
                        <div class="attr-item">
                          <ul>
                            <li :class="{attrSelect: attrs.select}" v-for="(attrs, index) in attrItem.attr" :key="attrs.id" @click="handleSelect(attrs, index, attrItem.attr)">{{attrs.attributeValue}}</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </a-modal>
                  <p v-for="attr in items.skuBeanList" :key="attr.cid" @click="updateAttr(items)">{{ selectStr.length > 0 ? selectStr : attr.name}} <a-icon style="margin-left: 3px;" type="down" /></p>
                </li>
                <li>￥{{items.price}}</li>
                <li class="number-btn">
                  <div class="quantity-btn">
                    <span class="decrease" :class="{isnotallowed: parseInt(items.num) === 1}" @click.stop="decrease(items)" ref="decreasecount"><a-icon type="minus" /></span>
                    <input type="text" v-model="items.num" ref="inputTag" @input="changeNum(items)" @blur="blurChange(items)" @focus="onFocus(items)">
                    <span class="add" :class="{addstocklimit: isOverStock, isnotallowed: parseInt(items.num) === parseInt(items.stock)}" @click.stop="addCount(items)" ref="addcount"><a-icon type="plus" /></span>
                  </div>
                </li>
                <li>￥{{(items.num * items.price).toFixed(2)}}</li>
                <li>
                  <div>
                    <p @click="toCollection(items)">移到我的收藏</p>
                    <p @click="showConfirm(items)">删除</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <a-affix :offset-bottom="25">
            <div class="table-footer">
              <input v-model="checkTotal" type="checkbox" name="checkall" id="checkall-footer" style="margin-right: 8px;cursor: pointer;" @click="handleClickCheckAll">
              <span style="color: #4e5053;cursor: pointer;">全选</span>
              <span class="deleteSelect" @click="deleteSelectProduct">删除选中的商品</span>
              <div class="right-content">
                已选商品
                <span>{{selectedProducts}}</span>
                件
                <span></span>
                总价(不含运费 元)：
                <span>￥{{priceTotal}}.00</span>
                <div class="settlement" @click="toSettlement">去结算</div>
              </div>
            </div>
          </a-affix>
        </div>
      </div>
      <div class="empty-box" v-if="isEmpty">
        <div class="empty-img">
          <img src="@/assets/images/empty_cart.png" alt="">
          <p>购物车内暂时还没有商品，赶紧去逛逛~</p>
          <p>或者先登录同步之前加入的商品</p>
          <button @click="toHome">去逛逛</button>
        </div>
      </div>
      <div class="recommend">
        <div class="recommend-title">
          <h1>为你推荐 </h1>
          <span class="change-list" @click="changeList">
            <h2>换一批</h2>
            <a-icon class="change-icon" style="color: #666666;" type="redo" />
          </span>
        </div>
        <div class="recommend-list">
          <ul>
            <li v-for="item in recommendList" :key="item.id" @click="handleClickProduct(item)">
              <div class="img-box">
                <img :src="item.imgurl" alt="">
              </div>
              <div class="product-title">
                <p>{{item.product_title}}</p>
                <p>
                  <span>￥{{item.price}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/api'
import Event from '@/assets/js/event'
import mixin from '@/assets/js/scrollTop'
export default {
  name: 'shoppingcart',
  mixins: [mixin],
  data () {
    return {
      isOverStock: false,
      visible: false,
      isEmpty: false,
      isLoading: true,
      recommendList: [],
      cartsList: [],
      checkShopName: null,
      checkTotal: false,
      num: 0,
      focusNum: '',
      updateTitle: '',
      updatePrice: '',
      updateAtrrImgUrl: '',
      skuBeanList: [],
      updateSkuBeanListName: '',
      updateAttrList: [],
      selectStr: '',
      cartId: '', // 记录修改购物车商品属性时所点击的购物车id
      checkList: [],
      selectedProducts: 0,
      priceTotal: 0
    }
  },
  mounted () {
    Event.$on('getCartsList', this.getCartsList)
    this.getRecommendList()
    this.getCartsList()
  },
  methods: {
    getRecommendList () {
      const params = {
        module: 'app_pc',
        action: 'product',
        m: 'recommend',
        access_id: localStorage.getItem('token'),
        language: null
      }
      api.getRecommendList(params).then(res => {
        if (res.data.code === 200) {
          this.recommendList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getCartsList () {
      const params = {
        module: 'app_pc',
        action: 'cart',
        m: 'index',
        access_id: localStorage.getItem('token'),
        language: null
      }
      api.getCartsList(params).then(res => {
        if (res.data.code === 200) {
          const cartsList = res.data.data.list
          cartsList.forEach(item => {
            item.checkShopName = false
            this.checkTotal = false
            item.list.forEach(items => {
              items.checkproduct = false
            })
          })
          this.cartsList = cartsList
          if (res.data.data.list.length === 0) {
            this.isLoading = false
            this.isEmpty = true
          } else {
            this.isLoading = false
          }
        } else {
          this.$message.error(res.data.message)
          this.$router.push('/login')
        }
      })
    },
    decrease (items) {
      if (parseInt(items.num) > 1) {
        this.num = parseInt(items.num)
        this.num--
        items.num = this.num
        this.updataCartNum(items) // 点击增加数量按钮后的回调，以更新购物车
        const target = window.event.currentTarget
        if (parseInt(items.num) === 1) {
          if (target.className === 'decrease') {
            target.style.cursor = 'not-allowed'
          }
        }
        if (parseInt(items.num) < parseInt(items.stock)) {
          const siblingNode = target.parentElement.childNodes[2]
          siblingNode.style.cursor = 'pointer'
        }
      }
      this.settleAccounts()
    },
    addCount (items) {
      if (parseInt(items.num) < parseInt(items.stock)) {
        this.num = parseInt(items.num)
        this.num++
        items.num = this.num
        this.updataCartNum(items) // 点击增加数量按钮后的回调，以更新购物车
        const target = window.event.currentTarget
        if (parseInt(items.num) > 0) {
          const siblingNode = target.parentElement.childNodes[0]
          siblingNode.style.cursor = 'pointer'
          target.style.cursor = 'pointer'
        }
        if (parseInt(items.num) === parseInt(items.stock)) {
          target.style.cursor = 'not-allowed'
        }
      }
      this.settleAccounts()
    },
    updataCartNum (items) {
      const params = {
        module: 'app_pc',
        action: 'cart',
        m: 'up_cart',
        access_id: localStorage.getItem('token'),
        goods: JSON.stringify({ num: items.num, cart_id: items.id }),
        language: null
      }
      api.updateCartNum(params).then(res => {
        if (res.status === 200) {
          this.getCartsList()
          Event.$emit('getCart')
        }
      })
    },
    onFocus (items) {
      this.focusNum = parseInt(items.num)
    },
    blurChange (items) { // 输入框失去焦点时如果输入为空，则自动变为原来的值
      if (items.num === '') {
        items.num = this.focusNum
      }
    },
    changeNum (items) { // 直接输入数量时，判断输入数值大于库存时提示，且自动锁定为库存量最大值
      if (items.num > parseInt(items.stock)) {
        items.num = parseInt(items.stock)
        this.$message.warning('库存只有' + items.stock)
      }
      this.settleAccounts()
    },
    updateAttr (items) { // 点击商品属性名弹出修改商品属性窗口
      if (localStorage.getItem('username')) {
        this.cartId = items.id // 记录修改购物车商品属性时所点击的购物车id
        this.updateAtrrImgUrl = items.imgurl
        this.updateTitle = items.pro_name
        this.updatePrice = items.price
        const params = {
          module: 'app_pc',
          action: 'cart',
          m: 'dj_attribute',
          access_id: localStorage.getItem('token'),
          car_id: items.id,
          language: null
        }
        api.getCartsUpdateAttribute(params).then(res => {
          if (res.status === 200) {
            if (res.data.code === 200) {
              this.visible = true
              this.skuBeanList = res.data.data[0].skuBeanList // 商品属性组合列表（尺码颜色规格组合后，要显示不同的价格，图片）
              this.updateAttrList = res.data.data[0].attrList // 商品属性列表
              this.findAttr(items)
            } else {
              this.$message.error('登录过期，请重新登录！')
              this.$router.push('/login')
            }
          }
        })
      } else {
        this.$message.error('请登录！')
        this.$router.push('/login')
      }
    },
    findAttr (items) { // 匹配已选属性值，让已选的属性变红色
      const arr = this.updateAttrList
      items.attrList.forEach(item => {
        item.attr.forEach(itemAttr => {
          arr.forEach(arritem => {
            arritem.attr.forEach(attrid => {
              if (attrid.id === itemAttr.id) {
                attrid.select = true
              }
              // console.log('想要的id：', attrid.id)
            })
          })
          // console.log('要匹配的id：', itemAttr.id)
        })
      })
    },
    handleSelect (attrs, index, parentAttr) {
      attrs.select = true
      for (let i = 0; i < parentAttr.length; i++) {
        if (i !== index) {
          const siblings = parentAttr[i]
          siblings.select = false
        }
      }
      this.findAttributeId()
    },
    findAttributeId () {
      let selectStr = ''
      this.updateAttrList.forEach(item => {
        item.attr.forEach(items => {
          if (items.select) { // 判断是否是选中状态，若是选中状态，则把属性值拼接字符串，同来作为下一步匹配attribute_id 的判断条件
            selectStr += items.attributeValue
          }
        })
      })
      let attributeid
      this.skuBeanList.forEach(item => {
        if (item.name === selectStr) { // 找出匹配的项
          attributeid = item.cid // 找到匹配的点击确定按钮时的回调请求所需的 attribute_id
          this.updatePrice = item.price // 同步所点击的属性对应的价格
          this.updateAtrrImgUrl = item.imgurl // 同步所点击的属性对应的图片显示
        }
      })
      return attributeid
    },
    handleOk () { // 确认修改商品属性
      const params = {
        module: 'app_pc',
        action: 'cart',
        m: 'modify_attribute',
        access_id: localStorage.getItem('token'),
        car_id: this.cartId,
        attribute_id: this.findAttributeId()
      }
      api.updateCarts(params).then(res => {
        if (res.status === 200) {
          this.getCartsList()
          this.visible = false
          this.$message.success('修改成功，赶紧下手吧！')
          this.priceTotal = 0
          this.selectedProducts = 0
        }
      })
    },
    showConfirm (items) { // 弹出删除购物车确认框
      console.log(items)
      const self = this
      this.$confirm({
        title: '确认要删除选中的商品吗？?',
        okText: '确定',
        cancelText: '取消',
        okType: 'danger',
        onOk () {
          const params = {
            module: 'app_pc',
            action: 'cart',
            m: 'delcart',
            access_id: localStorage.getItem('token'),
            car_id: items.id,
            language: null
          }
          api.comfirmDeleCarts(params).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              self.$message.success('删除成功！')
              Event.$emit('getCart')
              self.getCartsList()
              if (self.checkTotal) {
                self.checkTotal = !self.checkTotal
                self.selectedProducts = 0
                self.priceTotal = 0
              }
            } else {
              self.$message.error(res.data.message)
            }
          }).catch(err => console.error(err))
        },
        onCancel () {}
      })
    },
    toHome () {
      location.reload()
    },
    changeList () { // 为你推荐列表点击换一批
      this.getRecommendList()
    },
    handleClickProduct (item) { // 点击为你推荐进入为你推荐商品详情页
      this.$store.commit('sendProductDetails', { products: item, title: '为你推荐' })
      Event.$emit('toProduct')
      this.$store.commit('changePage', 'ProductDetails')
      this.scrolltotop()
    },
    handleSelectItem (items) {
      items.checkproduct = !items.checkproduct
      this.settleAccounts()
      const isSelectShopName = this.cartsList.some(item => {
        return item.checkShopName
      })
      if (isSelectShopName) {
        this.checkTotal = true
      } else {
        this.checkTotal = !this.checkTotal
      }
    },
    handleClickShopName (item) {
      item.list.forEach(select => {
        select.checkproduct = !item.checkShopName
      })
      this.settleAccounts()
      const isSelectShopName = this.cartsList.some(item => {
        return item.checkShopName
      })
      if (isSelectShopName) {
        this.checkTotal = true
      } else {
        this.checkTotal = !this.checkTotal
      }
    },
    handleClickCheckAll () {
      const arr = this.cartsList
      arr.forEach(item => {
        item.checkShopName = !this.checkTotal
        item.list.forEach(select => {
          select.checkproduct = item.checkShopName
        })
      })
      this.settleAccounts()
    },
    settleAccounts () {
      let selects = 0
      let priceTotal = 0
      const catsArr = this.cartsList
      catsArr.forEach(item => {
        item.list.forEach(sel => {
          if (sel.checkproduct) {
            selects += parseInt(sel.num)
            priceTotal += parseInt(sel.num) * parseInt(sel.price)
          } else {
            this.priceTotal = 0
            this.selectedProducts = 0
          }
        })
        const ischeckShopName = item.list.some(ev => {
          return ev.checkproduct
        })
        if (ischeckShopName) {
          item.checkShopName = true
        } else {
          item.checkShopName = false
        }
      })
      this.selectedProducts = selects
      this.priceTotal = priceTotal
    },
    toSettlement () { // 去结算
      const isSettlement = this.cartsList.some(item => { // 用于判断在点击去结算按钮时，如果有一个商品被选中则就可以跳转至结算页面，否则弹出请选择商品的提示
        return item.checkShopName
      })
      if (isSettlement) {
        this.$message.success('敬请期待！')
        // const params = {
        //   module: 'app_pc',
        //   action: 'order',
        //   m: 'Settlement',
        //   access_id: localStorage.getItem('token'),
        //   product_type: null,
        //   address_id: null,
        //   canshu: true,
        //   coupon_id: '0,0',
        //   cart_id: 16392,
        //   language: null
        // }
      } else {
        this.$message.error('请选择商品!')
      }
    },
    toCollection (items) { // 移到我的收藏
      const params = {
        module: 'app_pc',
        action: 'cart',
        m: 'to_Collection',
        access_id: localStorage.getItem('token'),
        car_id: items.id,
        language: null
      }
      api.toCollection(params).then(res => {
        if (res.status === 200) {
          this.$message.success('已移到我的收藏！')
          this.getCartsList()
          Event.$emit('getCart')
        }
      })
    },
    deleteSelectProduct () {
      console.log(this.$route)
      var isSelect = this.cartsList.some(isSel => {
        return isSel.checkShopName
      })
      if (isSelect) {
        const self = this
        this.$confirm({
          title: '确认要移动到我的收藏吗?',
          okText: '确定',
          cancelText: '取消',
          okType: 'danger',
          onOk () {
            const carid = []
            self.cartsList.forEach(item => {
              item.list.forEach(items => {
                if (items.checkproduct) {
                  carid.push(items.id)
                }
              })
            })
            const str = carid.join(',')
            const params = {
              module: 'app_pc',
              action: 'cart',
              m: 'delcart',
              access_id: localStorage.getItem('token'),
              car_id: str,
              language: null
            }
            api.deleteSelectProduct(params).then(res => {
              if (res.status === 200 && res.data.code === 200) {
                self.$message.success('已移动到我的收藏！')
                Event.$emit('getCart')
                self.getCartsList()
              } else {
                self.$message.error(res.data.message)
              }
            })
          },
          onCancel () {}
        })
      } else {
        this.$message.error('请选择商品！')
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .updateAttr-img {
    width: 100%;
    height: 110px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dfdfdf;
    div {
      height: 100%;
      float: left;
      p {
        margin-left: 15px;
        &:first-child {
          font-size: 16px;
          color: #020202;
          max-width: 400px;
        }
        &:last-child {
          margin-top: 15px;
          font-size: 16px;
          color: #d4282d;
          max-width: 400px;
        }
      }
      img {
        height: 80px;
        width: 80px;
      }
    }
  }
  .attrlist-box {
    margin-top: 25px;
    min-width: 600px;
    .attr-list {
      min-width: 600px;
      margin-bottom: 10px;
      overflow: hidden;
      .attr-name {
        width: 61px;
        height: 100%;
        float: left;
        span {
          display: block;
          float: left;
          width: 61px;
          height: 100%;
          font-size: 14px;
          color: #666666;
        }
      }
      .attr-item {
        width: calc(100% - 61px);
        height: 100%;
        padding-left: 15px;
        float: right;
        ul {
          max-width: 800px;
          min-height: 35px;
          float: left;
          li {
            min-width: 57px;
            padding: 0 15px;
            height: 32px;
            line-height: 32px;
            margin-right: 15px;
            margin-bottom: 10px;
            text-align: center;
            float: left;
            border: 1px solid #DCDFE6;
            color: #606266;
            cursor: pointer;
            &:hover {
              border: 1px solid #d4282d;
            }
          }
          .attrSelect {
            color: #d4282d!important;
            border: 1px solid #d4282d!important;
          }
        }
      }
    }
  }
  ::v-deep .ant-modal-body {
    padding-top: 40px!important;
  }
  ::v-deep .ant-modal {
    margin-top: 80px;
    min-width: 600px!important;
  }
  ::v-deep .ant-btn-primary {
    background-color: #ff3b31!important;
    border: none;
    font-size: 14px;
    &:hover {
      background-color: rgba(255, 59, 49, 0.84) !important;
    }
  }
  .box {
    max-width: 1280px;
    min-width: 780px;
    margin: 0 auto;
    padding-left: 10px;
    /*background-color: #98ffee;*/
    .nav-box {
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      /*background-color: #62ffe1;*/
      .breadcrumb-link {
        color: #303133!important;
      }
    }
    .cart-list-box {
      width: 100%;
      /*height: 1000px;*/
      /*background-color: #ff6848;*/
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .empty-box {
        width: 100%;
        height: 389px;
        /*background-color: #8edeff;*/
        text-align: center;
       .empty-img {
         margin-top: 52px;
         img {
           margin-bottom: 20px;
         }
         p {
           font-size: 16px;
           line-height: 20px;
           color: #888888;
         }
         button {
           background: #ffffff;
           color: #D4282D;
           margin-top: 30px;
           width: 112px;
           height: 40px;
           border: 1px solid rgba(212,40,45,1);
           cursor: pointer;
         }
       }
      }
      .carts-list {
        width: 100%;
        .table-title {
          width: 100%;
          height: 50px;
          padding-left: 5px;
          background-color: #e2e2e2;
          ul {
            width: 100%;
            height: 100%;
            overflow: hidden;
            li {
              display: inline-block;
              overflow: hidden;
              line-height: 50px;
              color: #4e5053;
              text-align: center;
              font-weight: 500;
              height: 100%;
              &:first-child {
                width: 120px;
                text-align: left;
                span {
                  color: #4e5053!important;
                }
              }
              &:nth-child(2) {
                padding-left: 40px;
                width: calc(100% - 820px);
              }
              &:nth-child(3) {
                padding-left: 20px;
                width: 100px;
              }
              &:nth-child(4) {
                padding-left: 50px;
                width: 200px;
              }
              &:nth-child(5) {
                padding-left: 10px;
                width: 200px;
              }
              &:nth-child(6) {
                padding-left: 5px;
                width: 200px;
              }
            }
          }
        }
        .carts-products {
          width: 100%;
          .product-list {
            width: 100%;
            min-height: 184px;
            .shop-name {
              width: 100%;
              height: 63px;
              display: flex;
              align-items: center;
              padding-left: 10px;
              span {
                color: #020202!important;
                font-size: 14px!important;
                font-weight: bold!important;
              }
              .coupon {
                width: 80px;
                height: 25px;
                /*background-color: #9bff7f;*/
                display: inline-block;
                margin-left: 10px;
                position: relative;
                .coupon-str {
                  width: 100%;
                  height: 100%;
                  line-height: 23px;
                  text-align: center;
                  font-size: 12px!important;
                  color:  #d4282d!important;
                  position: absolute;
                  left: 0;
                  top: 0;
                }
                img {
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .shop-product {
              width: 100%;
              min-height: 121px;
              padding-left: 10px;
              border: 1px solid #d7d7d7;
              ul {
                width: 100%;
                height: 121px;
                display: flex;
                align-items: center;
                overflow: hidden;
                li {
                  display: inline-block;
                  overflow: hidden;
                  position: relative;
                  color: #4e5053;
                  text-align: center;
                  font-weight: 500;
                  height: 95px;
                  line-height: 95px;
                  img {
                    position: absolute;
                    width: 95px;
                    height: 100%;
                    margin-left: 15px;
                  }
                  &:first-child {
                    width: 140px;
                    text-align: left;
                    span {
                      color: #4e5053!important;
                    }
                    span:hover {
                      color: red!important;
                    }
                  }
                  &:nth-child(2) {
                    width: calc(100% - 820px);
                    min-width: 175px;
                    line-height: normal;
                    text-align: left;
                    position: relative;
                    p {
                      &:first-child {
                        color: #020202;
                        font-size: 14px;
                        position: absolute;
                        left: 10px;
                        top: 0;
                      }
                      &:last-child {
                        position: absolute;
                        left: 10px;
                        bottom: 3px;
                        font-size: 12px;
                        cursor: pointer;
                        color: #999999;
                        &:hover {
                          color: red;
                        }
                      }
                    }
                  }
                  &:nth-child(3) {
                    color: #020202;
                    font-size: 14px;
                    width: 100px;
                  }
                  &:nth-child(4) {
                    width: 200px;
                    line-height: normal;
                    display: flex;
                    align-items: center;
                    line-height: normal;
                    justify-content: center;
                    .quantity-btn {
                      margin-left: 42px;
                      /*margin-top: 20px;*/
                      display: inline-block;
                      border-radius: 4px;
                      width: 130px;
                      height: 32px;
                      border: 1px solid #DCDFE6;
                      input {
                        height: 100%;
                        width: calc(100% - 66px);
                        text-align: center;
                        background-color: transparent;
                        border-left: 1px solid #DCDFE6;
                        border-right: 1px solid #DCDFE6;
                      }
                      .decrease {
                        cursor: pointer;
                        display: inline-block;
                        float: left;
                        width: 33px;
                        font-size: 12px;
                        height: 100%;
                        color: #9c9c9c;
                        font-family: Andalus;
                        font-weight: normal;
                        line-height: 32px;
                        text-align: center;
                      }
                      .isnotallowed {
                        cursor: not-allowed;
                      }
                      .add {
                        cursor: pointer;
                        display: inline-block;
                        float: right;
                        width: 33px;
                        height: 100%;
                        font-size: 14px;
                        color: #9c9c9c;
                        font-family: Andalus;
                        line-height: 30px;
                        text-align: center;
                      }
                      .addstocklimit {
                        cursor: not-allowed;
                        display: inline-block;
                        float: right;
                        width: 33px;
                        height: 100%;
                        font-size: 14px;
                        color: #9c9c9c;
                        font-family: Andalus;
                        line-height: 30px;
                        text-align: center;
                      }
                    }
                  }
                  &:nth-child(5) {
                    color: #D4282D;
                    font-weight: bold;
                    background-color: transparent;
                    width: 200px;
                  }
                  &:nth-child(6) {
                    display: flex;
                    align-items: center;
                    line-height: normal;
                    justify-content: center;
                    width: 200px;
                    p {
                      cursor: pointer;
                      &:hover {
                        color: #d4282d;
                      }
                    }
                  }
                }
              }
            }
          }
          .table-footer {
            width: 100%;
            height: 70px;
            line-height: 70px;
            margin-top: 25px;
            padding-left: 5px;
            background-color: #e6e6e6;
            label {
              color: #4e5053!important;
            }
            .deleteSelect {
              cursor: pointer;
              margin-left: 30px;
              color: #010101;
              &:hover {
                color: #d4282d;
              }
            }
            .right-content {
              float: right;
              min-width: 540px;
              height: 100%;
              /*background-color: #9f97ff;*/
              .settlement {
                height: 100%;
                float: right;
                color: white;
                border: none;
                margin-left: 25px;
                cursor: pointer;
                text-align: center;
                font-size: 20px;
                width: 180px;
                background-color: #d4282d;
              }
              span {
                margin-top: 2px;
                color: #D4282D;
                font-size: 20px;
                font-weight: bold;
                margin: 0px 3px;
              }
            }
          }
        }
      }
      .recommend {
        width: 100%;
        margin-top: 79px;
        .recommend-title {
          width: 100%;
          height: 50px;
          .change-list {
            cursor: pointer;
            &:hover {
              h2 {
                color: #d4282d!important;
              }
              .change-icon{
                color: #d4282d!important;
              }
            }
          }
          h1 {
            float: left;
            color: #020202;
            font-size: 16px;
            font-weight: bold;
          }
          span {
            display: inline-block;
            float: right;
            font-size: 16px;
            h2 {
              color: #666666;
              display: inline-block;
              margin-right: 3px;
            }
          }
        }
        .recommend-list {
          width: 100%;
          min-height: 410px;
          margin-bottom: 10px;
          /*background-color: #bdff28;*/
          ul {
            width: 100%;
            height: 100%;
            li {
              width: 302px;
              height: 100%;
              overflow: hidden;
              display: inline-block;
              /*background-color: #0dffb1;*/
              margin-right: 20px;
              border: 1px solid #EEEEEE;
              padding-bottom: 21px;
              cursor: pointer;
              &:last-child {
                margin: 0;
              }
              &:hover {
                box-shadow: rgb(228, 228, 228) 0px 0px 5px 2px;
              }
              .img-box {
                width: 100%;
                height: 302px;
                /*background-color: #ff290e;*/
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .product-title {
                width: 100%;
                height: 98px;
                /*background-color: #afff2d;*/
                p {
                  width: 100%;
                  text-align: center;
                  &:first-child {
                    padding: 0 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: bold;
                    color: #020202;
                    font-size: 14px;
                    margin: 20px 0 13px 0;
                  }
                  span {
                    font-size: 16px;
                    &:first-child {
                      margin-right: 5px;
                      color: #D4282D;
                      vertical-align: middle;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
